 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
    <div id="app"> 
        {{message}} 
        <!-- 把变量 message 中的值，绑定到 id 上 -->
        <div v-bind:id="divId_1"></div>
        <div :id="divId_2"></div>
        <ul>
            <li v-for="item in list">
                <!-- 根据 v-if 和 v-else 决定哪个 <span> 生效 -->
                <span v-if="!item.del">{{item.title}}</span>
                <span v-else style="text-decoration:line-through">{{item.title}}</span>
                <!-- 如果 v-show 的条件不满足，button 不显示，但是会挂载到 dom 树上 -->
                <button v-show="!item.del">v-show</button>
            </li>
        </ul>
    </div>
    </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var vm = new Vue({
             el: '#app',
             data: {
                 message: 'hello world',
                 divId_1: 'id-1',
                 divId_2: 'id-2',
                 item: {
                     title: '课程1',
                     del: false
                 },
                 list: [
                    {
                        title: '课程1',
                        del: false
                    }, {
                        title: '课程2',
                        del: false
                    }
                 ]
             }
         })
     </script>
    </body>
 </html>